<template>
  <div class="register">
    <navBar title="代报员注册" @onClickLeft="onClickLeft" />
    <div class="register_content">
      <van-form validate-first>
        <van-field
          v-model="phone"
          border
          center
          clearable
          label
          placeholder="手机号"
          :disabled="isErrands"
          :rules="[{ required: true, message: '请填写手机号' }]"
        >
          <template #button>
            <van-button
              type="primary"
              size="mini"
              :disabled="codeDisabled"
              @click.stop="getCode"
            >{{getCodeText}}</van-button>
          </template>
        </van-field>
        <van-password-input
          class="password-input"
          :border="false"
          :value="code"
          :mask="false"
          :focused="showKeyboard"
          @focus="showKeyboard = true"
        />
        <div class="agreement" @click="isChecked = !isChecked">
          <template>
            <van-checkbox v-model="isChecked" shape="square" icon-size="14">我已阅读且同意</van-checkbox>
            <router-link
              :to="{ path: '/agreement/regirster', name: 'AgreementRegister', params: {phone: phone, code: code} }"
              tag="span"
              style="font-weight: 700;"
            >《注册及隐私协议》</router-link>
          </template>
        </div>
        <div class="register_btn">
          <van-button round block type="info" @click="onSubmit">注册</van-button>
        </div>
      </van-form>
    </div>
    <!-- 数字键盘 -->
    <van-number-keyboard
      :show="showKeyboard"
      @input="onInput"
      @delete="onDelete"
      @blur="showKeyboard = false"
    ></van-number-keyboard>
  </div>
</template>

<script>
import navBar from "@cb/navBar.vue";
import { Dialog, Toast } from "vant";
import axios from 'axios';
import config from '../../../public/config';
import {get} from '../../../public/API/query';
export default {
  data() {
    return {
      phone: null,
      code: "",
      showKeyboard: false,
      endTime: 0,
      phonePattern: /^1[3-9]\d{9}$/,
      getCodeText: "获取验证码",
      type: 1,
      password: "",
      pwdConfirm: "",
      codeDisabled: false,
      isErrands: false,
      isChecked: false,
    };
  },
  created() {
    if (this.$route.query && this.$route.query.type == 1) {
      this.type = 2;
    }
    if (this.$route.query && this.$route.query.keyword) {
      this.isErrands = true;
      this.phone = window.atob(this.$route.query.keyword);
    }

    if (this.$route.params.phone && this.$route.params.phone != "undefined") {
      this.phone = atob(this.$route.params.phone) == "undefined" ? '' : atob(this.$route.params.phone);
    }
    
    if (this.$route.params.code) {
      this.code = this.$route.params.code;
    }
    if (this.$route.params.isRead) {
      this.isChecked = this.$route.params.isRead;
    }
  },
  components: {
    navBar,
  },
  deactivated() {
    this.$destroy(true); //销毁组件
  },
  destroyed(){
    window.localStorage.removeItem(config.get('v')+'_init')
    window.localStorage.removeItem('userinfo');
  },
  methods: {
    onClickLeft() {
      this.$router.push('/login')
    },
    getCode() {
      if (!/^1[3456789]\d{9}$/.test(this.phone)) {
        Toast.fail("请填写正确的手机号");
        return;
      }
      let params = {
        tel: this.phone,
      };
      axios.get(config.get('bpp_url')+'v1060_getCodeToRegistereErrand',{params}).then(res=>{
        if (res.data.code == 200) {
          Toast.success("已发送验证码，请注意查收！");
          this.cutDown()
        } else if (res.data.code === 301) {
          Toast.fail("该手机号已注册");
        } else {
          this.getCodeText = "发送验证码";
          this.codeDisabled = false;
        }
      })
    },
    cutDown(){
      let that = this;
      that.codeDisabled = true;
      let num = 60;
      let timer = setInterval(function () {
        that.getCodeText = num + "秒后可重新发送";
        num -= 1;
        if (num < 0) {
          that.getCodeText = "发送验证码";
          that.codeDisabled = false;
          clearInterval(timer);
        }
      }, 1000);
    },
    onSubmit() {
      if (this.code) {
        if (this.code < 6) {
          Toast.fail("请输入完整的验证码");
        } else {
          if (!this.isChecked) {
            Dialog.alert({
              title: "提示",
              message: "请勾选并阅读相关服务条款和隐私政策！",
            });
            return
          }
          this.submitPost();
        }
      } else {
        Toast.fail("请输入验证码");
      }
    },
    submitPost() {
      let params = {
        tel: this.phone,
        code: this.code,
      }
       axios.get(config.get('bpp_url')+'v1060_registereErrand',{params}).then(res=>{
          if (res.data.code == 200) {
            // Toast.success("注册成功");
            Dialog.alert({
              message:
                "您的初始密码为：111111，为了您的账号安全，登录后请及时修改您的密码。",
              title: "注册成功",
            }).then(() => {
              // on close
            });
            this.$router.push({
              path: "/login",
              query: {
                phone: btoa(this.phone),
              },
            });
          } else if (res.data.code === 301) {
            Toast.fail("验证码错误");
          }
        })
    },
    onDelete() {
      this.code = this.code.slice(0, this.code.length - 1);
    },
    onInput(key) {
      this.code = (this.code + key).slice(0, 6);
    },
  },
};
</script>

<style lang='less'>
.register {
  padding: 20px 15px 15px 15px;
  box-sizing: border-box;
  &_head {
    height: 44px;
    line-height: 44px;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: rgba(53, 53, 53, 1);
    font-family: PingFangSC-Semibold, PingFang SC;
  }
  &_content {
    margin-top: 80px;
    .label {
      font-size: 14px;
    }
    .van-form {
      .van-field {
        margin-bottom: 15px;
        padding-left: 0;
      }
    }
  }
  .van-password-input {
    margin: 0;
    margin-bottom: 10px;

    .password-input {
      // height: .96rem;
      // line-height: .96rem;

      &::after {
        border: none;
      }

      li {
        border-bottom: 1px solid #ebedf0;
        margin-right: 11px;
        box-sizing: border-box;
        // line-height: .96rem;

        &:last-child {
          margin-right: 0;
        }

        &::after {
          border: none;
        }
      }
    }
  }
  .register_btn {
    width: 100%;
    box-sizing: border-box;
    padding: 15px 15px;
    .van-button {
      border-radius: 42px;
    }
    .countDown {
      display: inline-block;
      margin: 0 0 15px 20px;
    }
  }
  .agreement {
    display: flex;
    align-items: center;
    line-height: 17px;
    font-size: 12.5px;
    height: 45px;
    box-sizing: border-box;
  }
}
</style>